<template>
    <view class="content">
        <view class="box">
            <view class="top">
                <view class="u-rela" @click="$screenshot('logo',1,1)">
                    <image :src="image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
                    <image src="../../static/icon/photo.png" class="photo"></image>
                </view>
                <view class="name">{{name || '用户名'}}</view>
            </view>
            <view class="title">个人资料</view>
            <view class="item">
                <view>姓名</view>
                <input type="text" v-model="name" placeholder="请输入姓名" class="inp">
            </view>
            <view class="item">
                <view>手机号</view>
                <input type="number" v-model="tel" placeholder="请输入手机号" class="inp">
            </view>
        </view>
        <view class="btn" @click="doSubmit">确认修改</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                image_uri: '',
                image_id: '',
                name: '',
                tel: '',
            };
        },
        onLoad() {
            var _this =this
            uni.$on('uAvatarCropper', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    console.log(ret)
                    if (data.fromWhere == "logo"){
                        _this.image_uri = ret.detail.image
                        _this.image_id = ret.detail.image_id
                    }
                });
            })
            
            this.getInfo()
        },
        methods: {
            doSubmit() {
                if (!this.image_id && !this.image_uri) {
                    this.$toast('请上传头像');
                    return
                }
                if (!this.name) {
                    this.$toast('请输入姓名');
                    return
                }
                if (!this.tel) {
                    this.$toast('请输入手机号');
                    return
                }
                if (!this.$checkPhone(this.tel)) {
                	this.$toast('联系电话格式不正确');
                	return false;
                }
                this.$ajax('update_person_detail', {
                    user_token: this.$getSync('userToken'),
                    nickname: this.name,//用户昵称
                    phone: this.tel,//手机号
                    image_id: this.image_id,//头像id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.image_uri = ret.detail.image
                        this.image_id = ret.detail.image_id
                        this.name = ret.detail.nickname
                        this.tel = ret.detail.phone
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .box{
        background-color: #fff;
        padding: 35rpx 30rpx 0;
    }
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .avatar{
        width: 165rpx;
        height: 165rpx;
        border-radius: 50%;
        border: 2rpx solid #e6e6e6;
    }
    .photo{
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .name{
        font-size: 34rpx;
        padding-top: 30rpx;
    }
    .title{
        font-size: 40rpx;
        color: #33384d;
        padding: 40rpx 0 5rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 115rpx;
        font-size: 30rpx;
        color: #33384d;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item>view{
        color: #999999;
    }
    .inp{
        width: 550rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        background-color: #40bef1;
        padding: 25rpx;
        border-radius: 50rpx;
        margin: 50rpx 20rpx;
    }

</style>
